<template>
    <div>
        <div class="films-box">
            <div class="list-name">
                <span>热门电影</span>
            </div>
            <div class="content-list">
                <film-item 
                    v-for="film in list" :key="film.filmeId" 
                    :film="film" 
                    @click.native="gotoDetail(film.filmId)"
                ></film-item>
            </div>
        </div>
    </div>
</template>
<script>
module.exports = {
    components:{
        FilmItem:httpVueLoader("../components/FilmItem.vue")
    },
    data(){
        return {
            list:[]
        }
    },
    methods: {
        loadFilmsData(){
            $.ajax({
                url:"http://127.0.0.1:80/filmApi/loadFilms.php",
                type:"post",
                data:{
                    size:50
                },
                dataType:"json",
                success:( { resultState,msg,result } )=>{
                    console.log(resultState,msg,result);
                    this.list = result;
                },
                error:()=>{

                }
            })
        },
        gotoDetail(filmId){
            // console.log("filmsPage.vue",this);
            // 切换到 DetailPage.vue 这个组件上
            // console.log(filmId);
            this.$emit("change-page",{
                name:"detailPage",
                filmId:filmId
            });
        }
    },
    // 使用created 完成异步数据的初始化调用
    //    1、可以保证vue实例的仓库data已经渲染完成
    //    2、保证 SSR（服务器端渲染） 的兼容性
    //         -> 服务器端渲染时无法执行 beforeMount 和 mounted
    created() {
        this.loadFilmsData();
    }
}
</script>